<template>
    <div id="retreatList">
        <el-card>
            <el-row>
                <el-col :span="20">
                    <div class="grid-content">
                        <el-select class="select-prefix" style="margin-right: 1px;" size="mini" v-model="isCompleted" placeholder="请选择完成状态" filterable @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>完成状态</span>
                            </template>
                            <el-option :value="2" label="全部"></el-option> 
                            <el-option :value="0" label="未完成"></el-option>
                            <el-option :value="1" label="已完成"></el-option>  
                        </el-select>
                        <el-select class="select-prefix" style="margin-right: 1px;" size="mini" v-model="approveStatus" placeholder="请选择审批状态" filterable @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>审批状态</span>
                            </template>
                            <el-option :value="3" label="全部"></el-option> 
                            <el-option :value="0" label="待审批"></el-option>
                            <el-option :value="2" label="已同意"></el-option>  
                            <el-option :value="-1" label="已拒绝"></el-option>     
                        </el-select>
                        <el-select class="select-prefix" style="margin-right: 1px;" size="mini" v-model="senderStoreNo" v-loadmore="loadMore" placeholder="请选择出库仓库" filterable remote :remote-method="handleChangeSearch" @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>出库仓</span>
                            </template>
                            <el-option v-for="(item, index) in warehouseList" :key="'c'+index" :label="item.warehouseName" :value= "item.warehouseId" ></el-option>
                               
                        </el-select>
                        <el-select class="select-prefix" size="mini" v-model="receiverStoreNo" v-loadmore="loadMore" placeholder="请选择入库仓库" filterable remote :remote-method="handleChangeSearch" @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>入库仓</span>
                            </template>
                            <el-option v-for="(item, index) in warehouseList" :key="'r'+index" :label="item.warehouseName" :value= "item.warehouseId" ></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content col_float_right">
                        <el-input size="mini" placeholder="输入单号查询" v-model="searchName" @change="handleChangeSearch"></el-input>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="mg-t-10">
            <el-table :data="tableData" border stripe>
                <el-table-column label="退库单号" prop="returnOrderId" fixed width="180"></el-table-column>
                <el-table-column label="出库单号" prop="stockOutOrderId" width="180"></el-table-column>
                <el-table-column label="入库单号" prop="stockInOrderId" width="180"></el-table-column>
                <el-table-column label="出库仓" prop="senderStore" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column label="入库仓" prop="receiverStore" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column label="多入（件）" prop="totalMore" width="100"></el-table-column>
                <el-table-column label="少入（件）" prop="totalLess" width="100"></el-table-column>
                <el-table-column label="创建时间" prop="gmtCreate" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作状态" prop="isCompleted">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.isCompleted == 1 ? 'success' : ''">
                            {{scope.row.isCompleted == 1 ? '已完成' : '未完成'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作人" prop="createUser"></el-table-column>
                <el-table-column label="操作时间" prop="gmtCompleted" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column label="审批状态" prop="approveStatus">
                     <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.approveStatus == 0 ? 'info' : scope.row.approveStatus == 1 ? 'warning' : scope.row.approveStatus == 2 ? 'success' : scope.row.approveStatus == -1 ? 'danger' : ''">
                            {{scope.row.approveStatus == 0 ? '待提交' : scope.row.approveStatus == 1 ? '待审批' : scope.row.approveStatus == 2 ? '已同意' : scope.row.approveStatus == -1 ? '已拒绝' : '-'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="审批人" prop="approveUser"></el-table-column>
                <el-table-column label="审批时间" prop="gmtApprove" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="60" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" v-if="scope.row.isCompleted == 1" @click="handleClickCheck(scope.row)">查看</el-button>
                        <el-button type="text" size="mini" v-else @click="handleClickEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <page v-if="total" :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
        </el-card>
        <retreatTpl v-if="isShow" isShow :type="type" :id="id" :scopeData="scopeData" @cancelShow="cancelShow" :listType="'list'" @getRetreatList="getRetreatList"></retreatTpl>
    </div>
</template>
<script>
    import page from '../../commonComponents/page'
    import retreatTpl from './retreatTpl'
    export default {
        components: { page, retreatTpl },
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                tableData: [
                    {
                        returnOrderId: 123
                    }
                ],
                searchName: '',
                isCompleted: 2, //操作状态
                approveStatus: 3, // 审批状态
                senderStoreNo: '',
                receiverStoreNo: '',
                warehousePage: 1,
                isNoMore: false,
                warehouseList: [],
                warehouseTotal: 0,
                type: 'check', // 按钮类型
                isShow: false,
                id: '',
                scopeData: null
            }
        },
        created() {
            this.getWarehouseList()
        },
        mounted() {
            this.getRetreatList()
        },
        methods: {
            loadMore() {
                if(!this.isNoMore) {
                    if(this.warehousePage <= Math.ceil(this.warehouseTotal/20)) {
                        this.warehousePage++ ;
                        this.getWarehouseList()
                    }
                }
            },
            /**查询仓库列表 */
            getWarehouseList() {
                let params= {
                    page: this.warehousePage,
                    size: 20,
                    level: '',
                    name: this.name,
                    type: ''
                }
                this.$server.storeWarehouseController.getWarehouseList(params).then(res => {
                    this.warehouseList=this.warehouseList.concat(res.data) 
                    this.warehouseTotal= res.total
                    if(res.data.length > 0 ) {
                        this.isNoMore= false
                    }else{
                        this.isNoMore= true
                    }
                })
            },
            /**条件查询 */
            handleChangeSearch(){
                this.getRetreatList()
            },
            /**获取单据列表 */
            getRetreatList() {
                let query= {
                    page: this.page,
                    size: this.size,
                }
                let params = { 
                    senderStoreNo: this.senderStoreNo,
                    receiverStoreNo: this.receiverStoreNo,
                    approveStatus: this.approveStatus != 3 ? this.approveStatus : '',
                    isCompleted: this.isCompleted != 2 ? this.isCompleted : '',
                    returnOrderId: this.searchName  
                }
                this.$server.stockControlApi.getRetreatList(query, params).then(res => {
                    this.total= res.total
                    this.tableData= res.data
                })
            },
            handlePageChange(val) {
                this.total= 0
                this.page= val
                this.getRetreatList()
            },
            handleSizeChange(val) {
                this.total= 0
                this.size= val
                this.getRetreatList()
            },
            /**查看按钮 */
            handleClickCheck(scope) {
                this.type= 'check'
                this.id= scope.stockReturnId
                this.scopeData= scope
                this.isShow= true
            },
            /**编辑按钮 */
            handleClickEdit(scope) {
                this.type= 'edit'
                this.id= scope.stockReturnId
                this.scopeData= scope
                this.isShow= true
            },
            cancelShow(val) {
                this.isShow= val
            }
        }
    }
</script>